<template>
  <div class="container-login">
      <!-- el-card是组件 解析后并不存在el-card标签 所以标签选择器好使吗 -->
      <el-card>
          <img src="../../assets/logo_index.png" alt="">
          <!-- 表单 -->
          <!-- 分析element-ui的表单组件 -->
          <!-- 在项目中使用表单组件 -->
          <!-- :model="loginForm"表单验证对象 :rules="loginRules" 表单数据规则
            两者之间通过prop进行绑定
            status-icon属性为输入框添加了表示校验结果的反馈图标。
          -->
         <el-form :model="loginForm" :rules="loginRules" status-icon ref="loginForm">
            <el-form-item prop="mobile">
                <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input style="width:240px;margin-right:8px" v-model="loginForm.code" placeholder="请输入验证码"></el-input>
                <el-button>发送验证码</el-button>
            </el-form-item>
            <el-form-item>
            <!-- :value="true" 复选框默认选中，且不能修改 -->
                <el-checkbox :value="true">我已阅读并同意用户协议和隐私条款</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button style="width:100%" type="primary" @click="submitForm()">登 录</el-button>
            </el-form-item>
      </el-form>
      </el-card>
    </div>
</template>

<script>
import auth from '@/utils/auth.js'
export default {
    name:'page-login',
    data(){
        // 自定义校验函数的规则
            // 三个参数
                // rule当前校验对象 不会使用 value当前字段对应的值 callback校验完毕后需要调用的回调函数
                    // 成功callback() 失败callback(new Error('错误信息提示'))
        var checkMobile=(rule,value,callback)=>{
            // 手机号的规则：必须以1开头 第二位是3·9之间，以9个数字结尾
            if(/^1[345789]\d{9}$/.test(value)){
                callback()
            }else{
                callback(new Error('手机号格式错误'))
            }
        };
        return {
            // 表单数据对象 mobileyucode是固定的 根据后台来定
            loginForm:{
                mobile:'',
                code:''
            },
            //表单验证规则
            loginRules:{
                //对name定义可能多种规则 
                mobile:[
                     { required: true, message: '请输入手机号', trigger: 'blur' },
                     //自定义手机号校验规则 原因是手机号的格式是不统一的 所以需要自定义校验
                    //  { type: 'number', message: '手机号必须为数字值'}, 
                    // validator是用来做自定义校验的 这个配置指定的是一个校验函数 函数必须提前声明在data函数return之前声明
                    // 校验函数是有规则的 有三个参数     
                    //  { len:11,message: '请输入11位手机号', trigger: 'blur'},  trigger: 'blur'是触发方式 blur是失去焦点而change是数据改变时触发
                     { validator: checkMobile, trigger: 'blur' }
                ],
                code:[
                     { required: true, message: '请输入验证码', trigger: 'blur' },
                     { len:6,message: '请输入6位验证码', trigger: 'blur'}
                ]
            },
        }
    },
     methods: {
        submitForm() {
        // 整体表单校验
        this.$refs.loginForm.validate(async valid=>{
            // valid代表是否整体校验成功
            if (valid) {
            // 进行登录
            // this.$http.post('authorizations',this.loginForm).then(res=>{
            //     //res.data 是后台返回的所有数据
            //     // 保存用户信息 res.data.data
            //     auth.setUser(res.data.data)
            //     // 成功跳转
            //     this.$router.push('/')
            // }).catch(e=>{
            //     this.$message.error('手机号或验证码错误')
            // })==================================promise对象使用async与await改写
            //理想情况 当某段代码可能出现报错可能出现异常 可以进行异常处理的捕获
            // 使用try{}catch(e){}进行异常捕获和处理
            try{
                const res=await this.$http.post('authorizations',this.loginForm)
                auth.setUser(res.data.data)
                this.$router.push('/')
                }catch(e){
                    this.$message.error('手机号或验证码错误')
                }
            }
        })
        }
    }
}
       
</script>

<style scoped lang="less">
.container-login{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    background: url(../../assets/login_bg.jpg) no-repeat center/cover;
    // 因为element-ui在组件的根容器上加了跟标签相同的类名
    .el-card{
        width: 400px;
        height: 350px;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        img{
            display: block;
            margin: 0 auto 20px;
            width: 200px;
        }
    }
}
</style>